<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Code Playground</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ace.js"></script>
</head>
<body>
    <h2>Natural Language Input </h2>
    <div id="editor" contenteditable="true" style="height: 200px;width: 500px;"></div>
    <button id="run-btn">Run</button>

    <!-- <h2>Output Code</h2> -->
    <div  id="output" style="height: 300px;"></div>

    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/python");

        document.getElementById("run-btn").addEventListener("click", function() {
            var code = editor.getValue();
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/run", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function() {
                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                    // alert("hello");
                    document.getElementById("output").innerHTML = xhr.responseText;
                }
            };
            xhr.send("input_code=" + encodeURIComponent(code));
        });
    </script>
</body>
</html>
